<template>
    <div>
        <el-card>
            <el-table border style="margin: .625rem 0;" :data="skuArr">
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="名称" show-overflow-tooltip width="150px" prop="skuName"></el-table-column>
                <el-table-column label="描述" show-overflow-tooltip width="250px" prop="skuDesc"></el-table-column>
                <el-table-column label="图片" width="200px">
                    <template #="{ row, $index }">
                        <img :src="row.skuDefaultImg" style="width: 6.25rem; height: 6.25rem;">
                    </template>
                </el-table-column>
                <el-table-column label="重量" width="150px" prop="weight"></el-table-column>
                <el-table-column label="价格" width="150px" prop="price"></el-table-column>
                <el-table-column label="操作" width="250px" fixed="right">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" :icon="row.isSale == 1 ? 'Bottom' : 'Top'"
                            :title="row.isSale == 1 ? '下架SKU' : '上架SKU'" @click="updateSale(row)"
                            v-has="`btn.Sku.updown`"></el-button>
                        <el-button type="primary" size="small" icon="Edit" title="修改SKU" @click="updateSku()"
                            v-has="`btn.Sku.update`"></el-button>
                        <el-button type="primary" size="small" icon="InfoFilled" title="查看SKU" @click="findSku(row)"
                            v-has="`btn.Sku.detail`"></el-button>
                        <el-popconfirm :title="`您确定删除${row.skuName}吗？`" width="12rem" icon="Delete"
                            @confirm="removeSku(row.id)">
                            <template #reference>
                                <el-button type="primary" size="small" icon="Delete" title="删除SKU"
                                    v-has="`btn.Sku.remove`"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页器-->
            <el-pagination v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[10, 15, 20, 25]"
                :background="true" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
                @current-change="getHasSku" @size-change="changeSize" />
            <!--抽屉组件：展示商品详情-->
            <el-drawer v-model="drawer">
                <template #header>
                    <h4>查看商品详情</h4>
                </template>
                <template #default>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">名称</el-col>
                        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
                    </el-row>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">描述</el-col>
                        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
                    </el-row>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">价格</el-col>
                        <el-col :span="18">{{ skuInfo.price }}</el-col>
                    </el-row>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">平台属性</el-col>
                        <el-col :span="18">
                            <el-tag style="margin: .625rem;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">
                                {{ item.valueName }}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">销售属性</el-col>
                        <el-col :span="18">
                            <el-tag style="margin: .625rem;" v-for="item in skuInfo.skuSaleAttrValueList"
                                :key="item.id">
                                {{ item.saleAttrValueName }}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: .625rem;">
                        <el-col :span="6">商品图片</el-col>
                        <el-col :span="18">
                            <el-carousel :interval="4000" indicator-position="outside" type="card" height="12.5rem">
                                <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                                    <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%;">
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
                </template>
            </el-drawer>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqSkuList, reqSaleSku, reqCancleSaleSku, reqSkuInfo, reqDeleteSku } from '@/api/product/sku'
import type { SkuInfoData, SkuData, SkuMessageData } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus';

//当前页面的页码
let pageNo = ref<number>(1)
//每一页展示的数据项数量
let limit = ref<number>(10)
//存储已有SKU数据的总数
let total = ref<number>(0)
//存储已有SKU数据
let skuArr = ref<SkuData[]>([])
//控制抽屉组件的显示与隐藏
let drawer = ref<boolean>(false)
let skuInfo = ref<SkuData>({})

//获取SKU数据
const getHasSku = async (pager = 1) => {
    //修改当前页码
    pageNo.value = pager
    let result: SkuInfoData = await reqSkuList(pageNo.value, limit.value)
    if (result.code == 200) {
        total.value = result.data.total
        skuArr.value = result.data.records
    }
}
//分页器下拉菜单发生变化时触发
const changeSize = () => {
    getHasSku()
}
//商品的上架与下架
const updateSale = async (row: SkuData) => {
    //将上架状态更新为下架状态
    if (row.isSale == 1) {
        await reqCancleSaleSku((row.id as number))
        ElMessage({
            type: 'success',
            message: '下架成功'
        })
        getHasSku(pageNo.value)
    } else {
        await reqSaleSku((row.id as number))
        ElMessage({
            type: 'success',
            message: '上架成功'
        })
        getHasSku(pageNo.value)
    }
}
//更新已有的SKU
const updateSku = () => {

}
//查看商品详情按钮的回调
const findSku = async (row: SkuData) => {
    drawer.value = true
    //获取已有的商品详情数据
    let result: SkuMessageData = await reqSkuInfo((row.id) as number)
    //储存已有的SKU
    skuInfo.value = result.data

}
//删除SKU
const removeSku = async (id: number) => {
    let result: any = await reqDeleteSku(id)
    if (result.code == 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        getHasSku(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}

//组件挂载完毕
onMounted(() => {
    getHasSku()
})
</script>

<style scoped lang="scss">
.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>